// dom元素获取
const toggleBatchBtn = document.querySelector('#toggleBatchBtn');
const batch = document.querySelector('#batch');

// 三个小点点击事件，出现对应组员，让柱状图可以切换
toggleBatchBtn.addEventListener("click", async () => {
    batch.classList.toggle("show")
})
//各个小组点击切换样式
batch.addEventListener('click', function (e) {
    console.log(e.target.tagName);
    if (e.target.tagName === "A") {
        document.querySelector('.bar ul li a.active') ? document.querySelector('.bar ul li a.active').classList.remove("active") : "";
        e.target.classList.add("active")
    }
})




const acquire = async function () {
    //请求 学生数据
    const stuInf = await axios({
        url: "/student/list",
    })
    //线型图的数据 
    const names = stuInf.data.data.map(i => i.name)//名字
    const salarys = stuInf.data.data.map(i => i.salary)//期望薪资
    const truesalary = stuInf.data.data.map(i => i.truesalary)//实际薪资

    //饼图的数据
    const pieData = []
    //循环遍历 循环出我们想要的数据
    stuInf.data.data.forEach(item => {
        //声明变量 index 判断饼图数据 pieData 中是否有匹配的省份，有输出 0 没有 输出 -1
        const index = pieData.findIndex(v => v.name === item.province)
        if (index === -1) {//判断，如果没有
            pieData.push({ value: 1, name: item.province })
        } else {//如果有，value 自身加1
            pieData[index].value++
        }
    });

    //请求 按组请求学生数据
    const res = await axios({
        url: "/score/batch?batch=1",

    })
    console.log("res", res);

    //折线图函数执行
    lineChart(names, salarys, truesalary)
    //饼图执行
    pieChart(pieData)

    barChart()
}

//封装折线图函数
const lineChart = (name, salarys, truesalary) => {

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('.line'));

    option = {
        //标题
        title: {
            text: '棒棒学生图'
        },
        // 上方小圆点
        legend: {},

        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: name,//名字
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            },
        },

        //下拉框
        dataZoom: [
            {
                start: 0,//下拉线条框起始位置
                end: 20//下拉线条框起始位置
            }
        ],
        //线
        series: [
            {
                name: '理想薪资',//薪资名字
                type: 'line',//线条出现
                data: salarys,//形参
                smooth: true,   //光滑线
                color: "red"

                // 最高点 最底点
                // markPoint: {
                // data: [
                // { type: 'max', name: 'Max' },
                // { type: 'min', name: 'Min' }
                // ]
                // },
                //中点标记线
                // markLine: {
                //     data: [{ type: 'average', name: 'Avg' }]
                // }
            },
            {
                name: '实际薪资',//薪资名字
                type: 'line',//线条出现
                data: truesalary,//形参
                smooth: true,     //光滑线
                color: "purple"
            }

        ]

    };
    //显示折线图
    myChart.setOption(option);
}

//封装饼图函数
const pieChart = (data) => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('.pie'));

    option = {
        //标题
        title: {
            text: '棒棒学生饼饼图'
        },
        legend: {
            top: 'bottom'
        },

        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',//
                radius: [20, 120],//半径
                center: ['50%', '50%'],//居中
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                //内容
                data
            }
        ]
    };

    //显示折线图
    myChart.setOption(option);
}

//封装柱状图
const barChart = () => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('.barChart'));
    option = {
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //         type: 'cross',
        //         crossStyle: {
        //             color: '#999'
        //         }
        //     }
        // },

        //顶部 小按钮
        legend: {
            data: ['Evaporation', 'Precipitation', 'Temperature', "111"]
        },
        grid: {
            width: "80%",
            height: "68%"
        },
        xAxis: [
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                    type: 'shadow',
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            {
                type: 'value',
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: {
                    formatter: '{value} 人'
                }
            },

        ],
        series: [
            {
                name: 'Evaporation',
                type: 'bar',
                barWidth: "20",
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 分';
                    }
                },
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
            },
            {
                name: 'Precipitation',
                type: 'bar',
                barWidth: "20",
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 人';
                    }
                },
                data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
            },
            {
                name: 'Temperature',
                type: 'bar',
                barWidth: "20",
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 人';
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            },
            {
                name: '111',
                type: 'bar',
                barWidth: "20",
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 人';
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };

    //显示折线图
    myChart.setOption(option);
}

acquire()